<template>
	<view class="layout">
		<view class="noCourse" v-if="!hasCourse">
			<l-empty image="order"/>
			<text @click="toMain">
				
				您还未添加个人课程，点此前往添加
			</text>
		</view>
		<view class='index' v-else>
			<scroll-view scroll-y="true" class="home-data" :style="'height:'+clentHeight+'px;'">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item,index) in courseLists" :right-options="del"
						@click="removeAcourse(item.courseId)" :key="item.courseId">
						<courseList :courseInfo="item"></courseList>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</scroll-view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js'

	const clentHeight = ref(0)
	const courseLists = ref([])
	const courseId = ref(0)
	const hasCourse = ref(true)
	const del = ref([{
		text: '删除',
		style: {
			backgroundColor: '#007aff'
		}
	}])
	const bindClick = async (id) => {
		
		let res = await apis.saveUserLike(id)
		uni.redirectTo({
			url: '/pages/myCourse/myCourse'
		})
	}
	onReady(() => {
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value = res.windowHeight
			}
		})
		getUserCourseList()
	});
	const getUserCourseList = async () => {
		let res = await apis.getUserCourse().then(res => {

			courseLists.value = res.data
			if(res.data.length === 0)
				hasCourse.value = false
		}).catch(error => {
			hasCourse.value = false
		})
		// console.log(res.data)
	}

	// const getUserLike = async ()=>{

	// }
	const toMain = () => {
		uni.reLaunch({
			url: '/pages/main/main'
		})
	}
	const getClientHeight = () => {
		const res = uni.getSystemInfoSync();
		const system = res.platform;
		if (system === 'ios') {
			return 44 + res.statusBarHeight;
		} else if (system === 'android') {
			return 48 + res.statusBarHeight;
		} else {
			return 0;
		}
	}
	
	const removeAcourse = (e)=>{
		uni.showModal({
			title:"确认删除此课程？",
			success: (res) => {
				if(res.confirm){
					courseId.value = e
					bindClick(courseId.value)
				}
			}
		})
	}
	
	//清空课程列表
	onNavigationBarButtonTap(e => {
		if(courseLists.value.length === 0){
			uni.showToast({
				title: '未添加个人课程',
				icon:'none'
			});
		}else{
			
		removeAllCourse()
		}
		
	})
	const removeAllCourse = () => {
		uni.showModal({
			title: "确认清空我的课程？",
			success: res => {
				if (res.confirm) {
					const courseIds = ref([])
					courseIds.value = courseLists.value.map(item => item.courseId)
					for(let i = 0;i < courseIds.value.length;i++){
						bindClick(courseIds.value[i])
					}
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		.noCourse {
			padding-top: 20vh;
			// margin-top: 50vh auto;
			text-align: center;
			// line-height: 50vh;
			
			color: #07c;
			text-decoration: underline;
			
		}
	}
</style>